﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title>门禁二维码获取</title>
    <meta name="renderer"
          content="webkit">
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style"
          content="black">
    <meta name="apple-mobile-web-app-capable"
          content="yes">
    <meta name="format-detection"
          content="telephone=no">
    <link rel="stylesheet"
          type="text/css"
          href="http://at.alicdn.com/t/font_680276_p06flaphix.css" />
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
            line-height: 2;
        }

        li {
            list-style: none;
        }

        html, body {
            height: 100%;
        }

        .code-contail {
            height: 100%;
            overflow: hidden;
            background-color: #58c474;
        }

        .code-title {
            margin-top: 20px;
            margin-bottom: 30px;
            color: #fff;
            font-size: 16px;
            text-align: center;
        }

        .code-title>i {
            margin-right: 6px;
        }


        .code-wepper {
            margin-bottom: 32px;
            padding: 0 10px;
            width: 100%;
            box-sizing: border-box;
        }

        .code-wepper-header {
            position: relative;
            height: 42px;
            background-color: #f2f2f2;
            border-bottom: 1px solid #eee;
            line-height: 42px;
            text-align: center;
            color: #666;
            font-size: 14px;
        }



        .code-wepper-body {
            padding: 10px 20px;
            background-color: #fff;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
        }

        .code-wepper-body>.img {
            width: 50%;
        }

        .code-wepper-body>.img>img {
            display: block;
            width: 100px;
            height: 100px;
            margin: 10px auto;
            background-color: #eee;
        }

        .code-wepper-footer {
            height: 47px;
            background-color: #fff;
            border-top: 1px solid #eee;
            color: #999;
            font-size: 14px;
            line-height: 47px;
            text-align: center;
        }

        .code-tip {
            padding: 0 38px;
            color: #fff;
        }

        .code-tip>ul>li {
            padding-left: 21px;
            font-size: 12px;
            position: relative;
            line-height: 20px;
        }

        .code-tip>ul>li::before {
            content: '●';
            width: 16px;
            position: absolute;
            left: 0;
            top: 0;
            color: #fff;
            text-align: center;
        }

        .code-tip>.name {
            line-height: 30px;
        }

        .code-tip>.name>i {
            margin-right: 7px;
            font-size: 16px !important;
        }
    </style>
    <script type="text/javascript"
            src="/entrance-guard/jquery.min.js"></script>
    <script type="text/javascript"
            src="/entrance-guard/layui.js"></script>
</head>

<body>
<div class="code-contail">
    <div class="code-title">
        <i class="iconfont icon-dingwei"></i>
        <span>北京云集汇通科技有限公司</span>
    </div>
    <div class="code-wepper">
        <div class="code-wepper-header">
            二维码分享
        </div>
        <div class="code-wepper-body">
            <div class="img">
                <img class="qr"
                     src=""
                     alt="二维码" />
            </div>
            <div class="img">
                <img class="qr"
                     src=""
                     alt="二维码" />
            </div>
            <div class="img">
                <img class="qr"
                     src=""
                     alt="二维码" />
            </div>
            <div class="img">
                <img class="qr"
                     src=""
                     alt="二维码" />
            </div>
        </div>
        <div class="code-wepper-footer">
            请将二维码对准扫描器适当距离
        </div>
    </div>
    <div class="code-footer">
        <div class="code-tip">
            <p class="name">
                <i class="iconfont icon-tixing"></i>提示
            </p>
            <ul>
                <li>二维码一分钟自动更新，也可进行手动更新;</li>
                <li>点击右上角按钮可以授权分享好友</li>
            </ul>
        </div>
    </div>
</div>
<script type="text/javascript">
    //获取路径参数
    getUrlParam = function(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return decodeURI(r[2]);
        return null;
    };

    var device = {
        baseUrl: "/entrance-guard/api/",
    }
    var layer;
    var interval;
    layui.use(['layer', 'form'], function() {
        layer = layui.layer,
            form = layui.form;
        generate();
        interval = setInterval(polling, 5000)

    });
</script>
<script th:inline="javascript">
    var shareId;
    var qrId = "0";

    function generate() {

        shareId = getUrlParam("shareId");
        $.get(device.baseUrl + shareId + '/generate', null, function(data) {
            console.log(data);
            if (data.status == '200' && data.data) {
                var base64 = data.data.resource.replace(/[\r\n]/g, '');
                $(".qr").attr("src", "data:image/png;base64," + base64);
                qrId = data.data.qrId;
            } else if (data.status == '300') {
                layer.msg("链接已过期。", {
                    icon: 2,
                    time: 5000
                });
                return false;
            } else {
                layer.msg('获取验证码失败，请重试。', {
                    icon: 2,
                    time: 5000
                });
                return false;
            }
            return true;
        })
    }

    function polling() {
        if (qrId != "0") {
            $.get(device.baseUrl + '/polling?qrId=' + qrId, null, function(data) {
                if (data.status == '200') {
                    switch (data.data.status) {
                        case "100":
                            break;
                        case "200":
                            layer.msg(data.data.desc, {
                                icon: 1,
                                time: 5000
                            });
                            clearInterval(interval);
                            break;
                        case "300":
                        case "403":
                            layer.msg(data.data.desc, {
                                icon: 2,
                                time: 5000
                            });
                            clearInterval(interval);
                            break;
                        case "500":
                            layer.msg("未知错误", {
                                icon: 2,
                                time: 5000
                            });
                            clearInterval(interval);
                            break;
                    }
                } else {
                    layer.msg('获取失败，请重试。', {
                        icon: 2,
                        time: 5000
                    });
                }
            })
        }

    }
</script>
</body>

</html>